<template>
    <view class="page">
        <!-- 权益 -->
        <view class="vip-interests">
            <view class="vip-grade">
                <view class="grade">
                    <text>我的会员等级</text>
                    <text class="action">V1</text>
                </view>
                <view class="rule">
                    <text>规则说明</text>
                    <text class="iconfont icon-more"></text>
                </view>
            </view>
            <view class="grade-rate">
                <view class="plan">
                    <view class="num">0</view>
                    <view class="bal">
                        <text></text>
                    </view>
                    <view class="num">1000</view>
                    <view class="tips">
                        <text>500</text>
                    </view>
                </view>
                <view class="upgrade-prompt">
                    <text>在获得500点成长值升级为</text>
                    <text class="action">V2</text>
                    <text>会员</text>
                </view>
            </view>
        </view>
        <!-- 我的会员权益 -->
        <view class="my-interests">
            <view class="interests-title">
                <text>我的会员权益</text>
            </view>
            <view class="interests-list">
                <view class="list" v-for="(item,index) in 9" :key="index">
                    <view class="thumb">
                        <!-- <image src="/static/coupon_default.png" mode=""></image> -->
                    </view>
                    <view class="title">24张/年</view>
                    <view class="describe">每月免邮券</view>
                </view>
            </view>
        </view>
        <!-- 开通会员弹窗 -->
        <view class="dredge-vip">
            <view class="vip-win">
                <view class="describe">
                    <view class="title">开通会员 享受更多特权</view>
                    <view class="des">超级会员价/多倍积分/赠送免邮券</view>
                </view>
                <view class="btn" @click="onDredge">
                    <text>立即开通</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    methods: {
        /**
         * 开通会员
         */
        onDredge() {
            uni.navigateTo({
                url: '/pagesA/my/membersOpened'
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
}

/* 会员权益 */
.vip-interests {
    width: 100%;
    height: 300rpx;
    background-color: #ffffff;
    border-radius: 0 0 20rpx 20rpx;
    .vip-grade {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4%;
        height: 100rpx;
        .grade {
            display: flex;
            align-items: center;
            text {
                font-size: 30rpx;
                font-weight: bold;
                color: #555555;
            }
            .action {
                color: #ff9900;
                margin-left: 10rpx;
            }
        }
        .rule {
            display: flex;
            align-items: center;
            text {
                font-size: 26rpx;
                color: #555555;
            }
        }
    }
    .grade-rate {
        padding: 0 4%;
        height: 300rpx;
        .plan {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100rpx;
            .num {
                font-size: 26rpx;
                color: #555555;
                margin: 0 20rpx;
            }
            .bal {
                position: relative;
                width: 80%;
                height: 14rpx;
                background-color: #eeeeee;
                border-radius: 14rpx;
                overflow: hidden;
                text {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 50%;
                    height: 100%;
                    background-color: $base;
                    border-radius: 14rpx;
                }
            }
            .tips {
                position: absolute;
                left: 40%;
                top: -20rpx;
                padding: 6rpx 20rpx;
                background-color: $base;
                border-radius: 8rpx;
                text {
                    font-size: 24rpx;
                    color: #ffffff;
                }
            }
            .tips:before {
                position: absolute;
                left: 50%;
                top: 42rpx;
                content: "";
                width: 0;
                height: 0;
                border-width: 12rpx;
                border-style: solid;
                border-color: $base transparent transparent transparent;
                transform: translate(-50%, 0);
            }
        }
        .upgrade-prompt {
            display: flex;
            align-items: center;
            padding: 0 6%;
            text {
                font-size: 26rpx;
                color: #222222;
            }
            .action {
                color: #ff9900;
            }
        }
    }
}

/* 我的会员权益 */
.my-interests {
    width: 100%;
    margin: 20rpx auto;
    background-color: #ffffff;
    border-radius: 20rpx;
    .interests-title {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4%;
        height: 100rpx;
        text {
            font-size: 28rpx;
            font-weight: bold;
            color: #222222;
        }
    }
    .interests-list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 4% 140rpx;
        .list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 33%;
            height: 200rpx;
            .thumb {
                width: 100rpx;
                height: 100rpx;
                background-color: #eeeeee;
                border-radius: 100%;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .title {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 60rpx;
                font-size: 28rpx;
                font-weight: bold;
                color: #222222;
            }
            .describe {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                font-size: 24rpx;
                color: #959595;
            }
        }
    }
}

/* 开通会员 */
.dredge-vip {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200rpx;
    .vip-win {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        height: 140rpx;
        background-color: #555555;
        border-radius: 140rpx;
        padding: 0 6%;
        .describe {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 70%;
            height: 100%;
            .title {
                font-size: 30rpx;
                font-weight: bold;
                color: #e9e2d2;
            }
            .des {
                font-size: 26rpx;
                color: #e9e2d2;
                margin-top: 10rpx;
            }
        }
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140rpx;
            height: 60rpx;
            background-color: $base;
            border-radius: 70rpx;
            box-shadow: 0 0 10rpx $base;
            text {
                font-size: 24rpx;
                color: #ffffff;
            }
        }
    }
}
</style>
